<template>
  <div class="container">
    <mheader v-if="!$store.state.search.showSearchPanel" />
    <van-pull-refresh v-if="!$store.state.search.showSearchPanel" v-model="isLoading" @refresh="onRefresh">
      <banner :list="banner" />
      <drawer3 :list="playList" title="推荐歌单" />
      <drawer2 :list="mvList" title="精选MV" />
      <span>推荐新歌</span>
    </van-pull-refresh>
    <msearch v-else />
  </div>
</template>

<script>
import mheader from '@/components/mheader'
import banner from '@/components/mbanner'
import drawer3 from '@/components/mdrawer3'
import drawer2 from '@/components/mdrawer2'
import msearch from '@/components/msearch'
import { getBanner, getPlaylistCatalogue, getPlaylist, getPlayMvList } from '@/utils/api/home'
import { hotList } from '@/utils/api/search'
import { pageMixin } from '@/utils/mixin'

export default {
  components: {
    mheader,
    banner,
    drawer2,
    drawer3,
    msearch
  },
  mixins: [pageMixin],
  head () {
    return {
      title: 'smusic 音乐精心推荐',
      meta: [
        { hid: 'description', name: 'smusic', content: '总有一款歌单适合现在的心情' }
      ]
    }
  },
  data () {
    return {
      isLoading: false
    }
  },
  async asyncData ({ ctx, params }) {
    try {
      const [banner, playList, mvList] = await Promise.all([
        getBanner(), getPlaylist(), getPlayMvList()
      ])
      return {
        banner: banner.data.banners,
        playList: playList.data.result,
        mvList: mvList.data.result
      }
    } catch (error) {}
  },
  async fetch ({ store, params }) {
    try {
      const [playlistCate, hostList] = await Promise.all([getPlaylistCatalogue(), hotList()])
      store.commit('setPlaylistCatalogue', playlistCate.data.sub)
      store.commit('search/setHotSearchList', hostList.data.data)
    } catch (error) {}
  },
  methods: {
    onRefresh () {
      // test
      setTimeout(() => {
        this.$toast('刷新成功')
        this.isLoading = false
      }, 500)
    }
  }
}
</script>

<style lang="scss">
.container {
  width: 100%;
  padding-bottom: 44px;
  position: relative;
}
</style>
